<template>
    <table>
        <thead>
            {#each attr.header as item}
            <tr>
                {#each item as subItem}
                <th>{{subItem}}</th>
                {/each}
            </tr>
            {/each}
        </thead>
        <tbody>
            {#each attr.lists as item}
            <tr>
                {#each item as subItem,k}
                <td label="{{attr.header[0][k]}}">{{subItem}}</td>
                {/each}
            </tr>
            {/each}
        </tbody>
    </table>
</template>
<script>
    export default function() {
        let event = new Event(this); // 事件派发
        let attr = this.reactive({
            header: [],
            lists: [],
        })

        // 监听属性变化
        this.attred = (name, oldValue, newValue) => {
            if ((name === 'header' || name === 'lists') && newValue !== oldValue) {
                try {
                    let data = JSON.parse(newValue);
                    if (name === 'header') {
                        attr.header = data
                    } else if (name === 'lists') {
                        attr.lists = data
                    }
                } catch (error) {
                    console.error(error);
                }
            }
        }

        // 清理资源
        this.cleaned = () => {
            // 移除事件监听
            event.destroy();
        }
    }
</script>
<style>
    table {
        width: 100%;
        border-collapse: collapse;
        border: 2px solid var(--default-middle);
        background-color: var(--white);

        & th,
        & td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid var(--gray-middle);
        }

        & th {
            background-color: var(--default-shallow);
            color: var(--white);
        }

        & tr:hover {
            background-color: var(--default-middle);
            color: var(--white-common);
        }
    }

    @media screen and (max-width: 750px) {
        table {
            border: 0;
            box-shadow: none;
            background-color: unset;

            & col {
                display: none;
            }

            & thead {
                display: none;
            }

            & tr {
                display: block;
                margin-bottom: 12px;
                border: 2px solid var(--default-middle);
                background-color: var(--white);
            }

            & td {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 8px;
                text-align: right;
                border-bottom: 1px solid var(--gray-middle);
            }

            & td:last-child {
                border-bottom: 0;
            }

            & td::before {
                content: attr(label);
                float: left;
                font-weight: 600;
                text-transform: uppercase;
                margin-right: 15px;
                min-width: min-content;
            }
        }
    }
</style>